<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/Public/js/three.min.js"></script>
    <script src="/Public/js/OrbitControls.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/geotiff.js"></script>
    <script src="/Public/js/f3d.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #1a1a2e;
            font-family: Arial, sans-serif;
        }
    </style>

</head>

<body>
    <script>
        let terrainMesh = null;
        let heightScale = 0.5;
        let smoothness = 3;

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x1a1a2e);

        // 创建相机
        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(1, 10, 3);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加光源
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        // 添加控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        //-------------------------------------
        const circleClipVertexShader = `
            varying vec2 vUv;
            varying vec3 vWorldPosition;
            void main() {
                vUv = uv;
                vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                vWorldPosition = worldPosition.xyz;
                gl_Position = projectionMatrix * viewMatrix * worldPosition;
            }
        `;

        const circleClipFragmentShader = `
            uniform vec3 circleCenter;
            uniform float circleRadius;
            varying vec3 vWorldPosition;
            uniform float time;
            
            void main() {
                if(vWorldPosition.y >-0.1){
                    discard;
                }

                float dist = length(vWorldPosition.xz - circleCenter.xz) / circleRadius;
                if (dist > 1.0) {
                    discard;
                }
                float ringPos = fract(time) * 0.8 + 0.1;  // 从0.1到0.9循环
                float ringWidth = 0.05;
                if(dist > ringPos && dist < ringPos + ringWidth){
                    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
                } else {
                    discard;
                }
            }
        `;

        function createShaderClippedMesh(targetMesh, center, radius) {
            const geometry = targetMesh.geometry;
            const material = new THREE.ShaderMaterial({
                vertexShader: circleClipVertexShader,
                fragmentShader: circleClipFragmentShader,
                side: THREE.DoubleSide,
                uniforms: {
                    circleCenter: { value: center },
                    circleRadius: { value: radius },
                    originalColor: { value: new THREE.Color('#436743') },
                    time: { value: 0.0 }
                }
            });
            const mesh = new THREE.Mesh(geometry, material);
            mesh.userData.material = material; // 将材质保存在userData中

            return mesh;
        }

        const terrain2Geometry = new THREE.PlaneGeometry(5, 5, 1000, 1000);
        const positions2 = terrain2Geometry.attributes.position.array;
        for (let i = 0; i < positions2.length; i += 3) {
            const x = positions2[i];
            const z = positions2[i + 1];
            const wave1 = Math.sin(x * 2) * 0.5;
            const wave2 = Math.cos(z * 1.5) * 0.3;
            const wave3 = Math.sin(x * 5 + z * 3) * 0.2;
            positions2[i + 2] = (wave1 + wave2 + wave3) * 1.5;
        }
        terrain2Geometry.computeVertexNormals();

        const terrain2 = new THREE.Mesh(terrain2Geometry, createTerrainMaterial());
        terrain2.rotateX(-Math.PI / 2)
        scene.add(terrain2);

        const shaderClippedMesh = createShaderClippedMesh(terrain2, new THREE.Vector3(0, 0, 0), 1);
        shaderClippedMesh.rotateX(-Math.PI / 2);
        scene.add(shaderClippedMesh);

        //-------------------------------------


        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            shaderClippedMesh.userData.material.uniforms.time.value += 0.001;
            renderer.render(scene, camera);
        }
        animate();

        function createTerrainMaterial() {
            const vertexShader = `
                varying vec2 vUv;
                varying vec3 vWorldPosition;
                varying float vElevation;
                
                void main() {
                    vUv = uv;
                    vElevation = position.z; // 存储高度信息
                    
                    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
                    vWorldPosition = worldPosition.xyz;
                    
                    gl_Position = projectionMatrix * viewMatrix * worldPosition;
                }
            `;

            const fragmentShader = `
                uniform vec3 lowColor;
                uniform vec3 midColor;
                uniform vec3 highColor;
                uniform bool showWireframe;
                
                varying vec2 vUv;
                varying float vElevation;
                varying vec3 vWorldPosition;
                
                // 根据高度获取颜色
                vec3 getElevationColor(float elevation) {
                    // 归一化高度到 [0,1]
                    float t = (elevation + 1.0) / 2.0;
                    
                    if (t < 0.3) {
                        return mix(lowColor, midColor, t / 0.3);
                    } else if (t < 0.7) {
                        return mix(midColor, vec3(0.3, 0.6, 0.2), (t - 0.3) / 0.4);
                    } else {
                        return mix(vec3(0.3, 0.6, 0.2), highColor, (t - 0.7) / 0.3);
                    }
                }
                
                void main() {
                    // 基础颜色基于高度
                    vec3 color = getElevationColor(vElevation);
                    
                    // 可选：显示网格线
                    if (showWireframe) {
                        vec2 grid = abs(fract(vUv * 100.0 - 0.5) - 0.5) / fwidth(vUv * 100.0);
                        float line = min(grid.x, grid.y);
                        if (line < 1.0) {
                            color = mix(vec3(0, 0, 0), color, line);
                        }
                    }
                    
                    gl_FragColor = vec4(color, 1.0);
                }
            `;

            return new THREE.ShaderMaterial({
                vertexShader: vertexShader,
                fragmentShader: fragmentShader,
                side: THREE.DoubleSide,
                uniforms: {
                    lowColor: { value: new THREE.Color(0.1, 0.3, 0.5) },   // 低处：深蓝色（水域）
                    midColor: { value: new THREE.Color(0.7, 0.6, 0.3) },   // 中部：土黄色
                    highColor: { value: new THREE.Color(0.9, 0.9, 0.9) },  // 高处：白色（雪）
                    showWireframe: { value: false }
                }
            });
        }
    </script>
</body>

</html>